<!--
 * @Description: 线编辑组件
 * @Autor: Liujm
 * @Date: 2019-11-5 10:36:11
 * @LastEditors: xiej
 * @LastEditTime: 2020-08-11 14:12:13
-->
<template>
  <div class="app-container polyline-editor">
    <app-mapview id="polyline-viewDiv"
                 basemap="IMG"
                 @mapview-loaded="mapviewLoaded" />
  </div>
</template>
<script>
import { loadModules } from 'esri-loader'
import { addRaiwayLayers } from '@/utils/gis.js'
import { getMapService } from '@/api/gis/basic'
import appMapview from '@/components/ItpsMap/AppMapview'

export default {
  components: { appMapview },
  props: {
    geometry: null,
    symbol: null,
    readOnly: { type: Boolean, default: false }
  },
  data() {
    return {
      view: null,
      graphicsLyr: null,
      sketch: null,
      graphic: null
    }
  },
  methods: {
    mapviewLoaded(paramters) {
      this.view = paramters.view
      loadModules([
        'esri/Graphic',
        'esri/geometry/Extent',
        'esri/layers/BaseTileLayer',
        'esri/layers/WMTSLayer',
        'esri/layers/MapImageLayer',
        'esri/layers/GraphicsLayer',
        'esri/widgets/Sketch'
      ], { url: tyeMapConf().jsapi })
        .then(([
          Graphic,
          Extent,
          BaseTileLayer, WMTSLayer, MapImageLayer, GraphicsLayer,
          Sketch
        ]) => {
          // 添加铁路线路
          getMapService({ serviceCodes: 'BZGTL,CZ,CZZJ,GLB' }).then(res => {
            // 添加铁路线路图层
            if (res.data && res.data.length > 0) {
              addRaiwayLayers(this.view.map, BaseTileLayer, WMTSLayer, MapImageLayer, res.data)
            }
          })
          this.graphicsLyr = new GraphicsLayer({ title: '线编辑' })
          this.view.map.add(this.graphicsLyr)
          if (!this.readOnly) {
            this.sketch = new Sketch({
              layer: this.graphicsLyr,
              view: this.view,
              availableCreateTools: []
            })
            this.sketch.viewModel.polylineSymbol = this.symbol
            this.sketch.on('create', evt => {
              if (evt.state === 'complete') {
                this.graphic = new Graphic({
                  geometry: evt.graphic.geometry,
                  symbol: this.symbol
                })
                // 隐藏新建工具
                this.sketch.availableCreateTools = []
              }
            })
            this.sketch.on('update', evt => {
              if (evt.state === 'complete') {
                this.graphic = new Graphic({
                  geometry: evt.graphics[0].geometry,
                  symbol: this.symbol
                })
              }
            })
            this.view.ui.add(this.sketch, 'top-right')
          }
          // 显示现有要素并居中
          this.redrawGraphic()
        })
    },
    redrawGraphic() {
      if (!this.view) return
      if (this.geometry && this.isPolyline(this.geometry)) {
        // 绘制工具栏上的按钮["point", "polyline", "polygon", "rectangle", "circle"]
        this.graphicsLyr.removeAll()
        this.graphicsLyr.add({ geometry: this.geometry,
          symbol: this.symbol })
        this.view.goTo(this.geometry)
      } else {
        this.sketch.availableCreateTools = ['polyline']
      }
    },
    isPolyline(geometry) {
      return geometry && geometry.length === 2 && [...geometry[0], ...geometry[1]].every(item => typeof item === 'number')
    }
  }
}
</script>
<style scoped="scoped">
    #polyline-viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
.polyline-editor{
  height: 100%;
}
</style>
<style lang="scss">
.polyline-editor .esri-sketch__panel>.esri-sketch__tool-section>.esri-icon-pan{
  display: none !important;
}
.polyline-editor .esri-sketch__panel>.esri-sketch__info-section>.esri-icon-trash{
  display: none !important;
}
</style>
